<template>   
    <!-- 使用swiper生成轮播图 -->
    <div class="swiper-container" ref="Swiper1">
      <!-- 单元 --> 
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(value) in carouselList" :key="value.id">
          <img :src="value.imgUrl" alt="">
        </div>                  
      </div>                
      <!-- 分隔符 -->
      <div class="swiper-pagination"></div>
      <!-- 左右导航标签 -->
      <div class="swiper-button-prev"></div> 
      <div class="swiper-button-next"></div>
      <!-- {{abc}} -->
    </div>
</template>

<script>
import Swiper from "swiper";
export default {
  nane: "Carousel",
  props: ["carouselList"], 
  watch: {
    carouselList: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          // 生成轮播图
          new Swiper(this.$refs.Swiper1, {
            loop: true,

            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            }      
          });
        });
      },              
    }        
  },
}
</script>

<style>

</style>